<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="姜启航">
    <title></title>
    <style>
    *{
        box-sizing: border-box;
    }
    ul{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .box{
        width: 520px;
        height: 280px;
        margin: 100px auto;
        position: relative;
    }
    .img-list li{
        position: absolute;
        top :0;
        left: 0;
        display: none;
    }
    .img-list li.current{
        display: block;
    }
    .indicator{
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 20px;
        display: flex;
        justify-content: center;
        color: #fff;
    }
    .indicator li{
        width: 20px;
        height: 20px;
        background-color: #bbb;
        text-align: center;
        line-height: 20px;
        margin:0 10px;
        border-radius: 50%;
        cursor: pointer;
    }
    .indicator li.active{
        background-color: #cc0000;
        
    }
    .img-click span{
        width: 30px; 
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: white;
        position: absolute;
        background-color: rgba(0, 0, 0, 0.1);
        top:calc(50% - 20px);
        display: none;
    }
    .img-click .prev{
        left:0;
    }
    .img-click .next{
        right: 0;
    } 
    .img-click span:hover{
        background-color: orange;
        cursor: pointer;
    }                                                                                             
    </style>
</head>
<body>
<div class="box">
    <ul class="img-list">
        <li class="current"><a href="#"><img src="./img/01.jpg" alt=""></a></li>
        <li><a href="#"><img src="img/02.jpg" alt=""></a></li>
        <li><a href="#"><img src="img/03.jpg" alt=""></a></li>
        <li><a href="#"><img src="img/04.jpg" alt=""></a></li>
        <li><a href="#"><img src="img/05.jpg" alt=""></a></li>
    </ul>
    <ul class="indicator">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <div class="img-click">
        <span class="prev">&lt;</span>
        <span class="next">&gt;</span>
    </div>
</div>
</body>
</html>

<script>
    
    window.onload=function(){
        // 第一步 找标签
        var box=document.querySelector('.box')
        var imgLis=document.querySelectorAll('.img-list li');
        var indicatorLis=document.querySelectorAll('.indicator li');
        var prev=document.querySelector('.prev');
        var next=document.querySelector('.next');
        
        // 记录当前图片的索引值
        var index=0;
        // 上一张
        function prevImg(){
            index=index==0?imgLis.length-1:index-1;
            console.log(index);
            showImg();
        }
        // 下一张
        function nextImg(){
            index=index==imgLis.length-1? 0 : index+1;
            showImg();
        }

        // 展示图片
        function showImg(){
            for(var i=0;i<imgLis.length;i++){
                imgLis[i].className='';
                indicatorLis[i].className='';
            }
            console.log(index);
            imgLis[index].className='current';
            indicatorLis[index].className='active';
        }

        // 1.自动切换图片
        var timer=setInterval(nextImg,1000);

        // 2.图片跟随指示灯切换
        for(var i=0;i<indicatorLis.length;i++){
            indicatorLis[i].index=i;
            indicatorLis[i].onmouseover=function(){
                // 鼠标进来,暂停自动切换
                clearInterval(timer);
                timer=null;
                // 根据鼠标选中的指示灯的索引来切换图片，并记录和更新index的值
                index=this.index;
                showImg();
            }
            indicatorLis[i].onmouseout=function(){
                // 鼠标出去，开始自动切换
                // if(timer) return;
                // if(timer!=null){
                //     return;
                // }
                timer=setInterval(nextImg,1000);
            }
        }

        // 3.点击按钮切换
        box.onmouseover=function(){
            clearInterval(timer);
            timer=null;
            prev.style.display='block';
            next.style.display='block';
        }
        box.onmouseout=function(){
            if(timer) return;
            timer=setInterval(nextImg,1000);
            prev.style.display='none';
            next.style.display='none';
        }
        // 点击 上一张
        prev.onclick=function(){
            prevImg();
        }
        // 点击 下一张
        next.onclick=function(){
            nextImg();
        }

    }





</script>